<template>
  <page-body>
    <view class="page">

      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view class="flex benben-position-layout flex flex-wrap align-center directDetail_flex_0"
          :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
          <view class='flex flex-wrap align-center justify-between flex-sub directDetail_fd0_0'>
            <view class='flex flex-wrap align-center directDetail_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
              data-url="1">
              <image class='directDetail_fd0_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"157.png"'></image>
            </view>
            <view class='flex flex-wrap align-stretch justify-center'>
            </view>
            <view class='flex align-center justify-end directDetail_fd0_0_c0 position-relative'>
              <image class=' directDetail_fd0_0_c0_c0' mode="aspectFit" @click.stop="popupShow1719975203414=true"
                :src='STATIC_URL+"169.png"' v-if="isLogin && (userInfo.id==info.user_id)">
              </image>

              <image @click.stop="isReport=!isReport" v-if="isLogin && (userInfo.id!=info.user_id)"
                class='directDetail_fd0_0_c2_c1' mode="aspectFit" :src='STATIC_URL+"167.png"'></image>
              <view v-if="isReport" :style="{top:StatusBarRpx + 60+'rpx', }"
                class='flex flex-wrap align-center self-center justify-center Talentdetails_fd0_0_c2_c1'
                @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/homePage/report/report?aid=${aid}&type=${info.type}`">
                <text class='Talentdetails_fd0_0_c2_c1_c0'>我要举报</text>
              </view>
            </view>
          </view>

        </view>
        <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
        <view style="position: relative">
          <swiper ref="benbenSwiperfd1_0" @change="changeImage" class='flex position-relative directDetail_fd1_0'
            previous-margin="0rpx" next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500"
            :autoplay='true' :circular='true'>


            <swiper-item class='flex  directDetail_fd1_0' v-for="(item,index) in info.images" :key="index"
              @click.stop="preveimg(info.images,index)">
              <image class='directDetail_fd1_0_c1_c0' mode="aspectFill" :src='item'></image>
            </swiper-item>


          </swiper>
          <view style="position: absolute"
            class="flex dot flex align-center justify-center directDetail_swiperDotfd1_0">
            <view class='flex flex align-center justify-center directDetail_numberfd1_0_c0'>
              <text class='directDetail_numberfd1_0_c0_c0'>{{bannerIndexfd1_0+1}}</text>
              <text>/</text>
              <text>{{(info.images.length)}}</text>
            </view>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout directDetail_flex_2">
        <view class='flex flex-direction flex-wrap align-stretch directDetail_fd2_0'>
          <view class='flex flex-wrap align-center justify-between'>
            <text class='directDetail_fd2_0_c0_c0'>{{info.job_type_name}}</text>
            <text class='directDetail_fd2_0_c0_c1'>{{info.create_time}}</text>
          </view>
          <view class='flex flex-wrap align-center directDetail_fd2_0_c1'>
            <view class='flex flex-wrap align-center directDetail_fd2_0_c1_c0'>
              <image class='directDetail_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"163.png"'></image>
              <text>{{info.address_area}}</text>
            </view>
            <view class='flex flex-wrap align-center directDetail_fd2_0_c1_c1' v-if="info.part_job_name">
              <text class='directDetail_fd2_0_c1_c1_c0'>{{info.part_job_name}}</text>
            </view>
            <view class='flex flex-wrap align-center directDetail_fd2_0_c1_c1' v-if="info.job_education_name">
              <text class='directDetail_fd2_0_c1_c1_c0'>{{info.job_education_name}}</text>
            </view>
            <view class='flex flex-wrap align-center directDetail_fd2_0_c1_c1' v-if="info.job_years_name">
              <text class='directDetail_fd2_0_c1_c1_c0'>{{info.job_years_name}}</text>
            </view>
          </view>
          <view class='flex align-center flex-sub directDetail_fd2_0_c2'>
            <text class='directDetail_fd2_0_c2_c0'>{{info.intended_wage}}</text>
            <text>元/{{info.settle_type_name}}</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch directDetail_fd2_0'>
          <text class='directDetail_fd2_1_c0'>职位详情</text>
          <view class="margin-top-sm directDetail_fd2_1_c1_c0_c0">{{info.content}}</view>
          <!--  <view class='flex flex-wrap align-stretch justify-between'>
            <view class='flex align-stretch directDetail_fd2_1_c1_c0'>
              <text class='directDetail_fd2_1_c1_c0_c0'>发薪日期：</text>
              <text class='directDetail_fd2_1_c1_c0_c1'>{{info.settle_type_name}}</text>
            </view>
          </view>
          <view class='flex align-stretch directDetail_fd2_1_c2'>
            <text class='directDetail_fd2_1_c1_c0_c0'>薪资结构：</text>
            <text class='directDetail_fd2_1_c1_c0_c1'>{{info.content}}</text>
          </view> -->
        </view>
        <view class='flex flex-direction flex-wrap align-stretch directDetail_fd2_0' v-if="info.company_introduction">
          <text class='directDetail_fd2_1_c0'>公司简介</text>
          <view class='flex flex-wrap align-center directDetail_fd2_2_c1'>
            <text class='directDetail_fd2_2_c1_c0'>{{info.company_introduction}}</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch directDetail_fd2_0'>
          <text class='directDetail_fd2_1_c0'>公司位置</text>
          <view class='flex flex-wrap align-stretch justify-between directDetail_fd2_3_c1'>
            <view class='flex flex-wrap align-center'>
              <text class='directDetail_fd2_1_c1_c0_c0'>行政位置</text>
              <text class='directDetail_fd2_3_c1_c0_c1'>{{info.address_area}}</text>
            </view>
          </view>
          <view class='flex flex-wrap align-stretch justify-between'>
            <view class='flex align-stretch'>
              <text class='directDetail_fd2_1_c1_c0_c0'>详细位置</text>
              <text class='directDetail_fd2_3_c2_c0_c1'>{{info.location_address}}</text>
            </view>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1719975552822" :mask="true" :mask-close-able="true" mode='center' :z-index='999'>
        <!---上下架flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center directDetail_flex_3">
          <text class='directDetail_fd3_0'>提示</text>
          <text class='directDetail_fd3_1'>确认上下架吗？</text>
          <view class='flex flex-wrap align-center directDetail_fd3_2'>
            <button class='directDetail_fd3_2_c0' @click.stop="popupShow1719975552822=false">取消</button>
            <button class='directDetail_fd3_2_c1' @click.stop="upXian">确认</button>
          </view>
        </view>

        <!---上下架flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1719975203414" :mask="true" :mask-close-able="true" mode='center' :z-index='999'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center directDetail_flex_4">
          <text class='directDetail_fd4_0'>提示</text>
          <text class='directDetail_fd4_1'>确认删除吗？</text>
          <view class='flex flex-wrap align-center directDetail_fd4_2'>
            <button class='directDetail_fd4_2_c0' @click.stop="popupShow1719975203414=false">取消</button>
            <button class='directDetail_fd4_2_c1' @click.stop="delPost">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1719903243161" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---立刻拨打flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center directDetail_flex_5">
          <text class='directDetail_fd5_0'>温馨提示</text>
          <text class='directDetail_fd5_1'>涉及金钱交易请谨慎, 谨防诈骗</text>
          <view class='flex flex-wrap align-center directDetail_fd5_2' @click.stop="callPhone">
            <button class='directDetail_fd5_2_c0'>立刻拨打</button>
          </view>
        </view>

        <!---立刻拨打flex布局结束-->

      </benben-popup>
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex directDetail_flex_6"
        :style="{height:(120+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub directDetail_fd6_0'
          v-if="isLogin && (userInfo.id!=info.user_id)">
          <view class='flex flex-direction flex-wrap align-center' @click.stop="collect">
            <image class='directDetail_fd6_0_c0_c0' mode="aspectFit" v-if="info.is_collect==1"
              :src='STATIC_URL+"161.png"'></image>

            <image class='directDetail_fd6_0_c0_c0' mode="aspectFit" v-if="info.is_collect==0"
              :src='STATIC_URL+"160.png"'></image>
            <text class='directDetail_fd6_0_c0_c2'>收藏</text>
          </view>
          <button class='directDetail_fd6_0_c1' @tap.stop="popupShow1719903243161=true">立即咨询</button>
        </view>
        <button v-if="isLogin && (userInfo.id==info.user_id) && (info.status==0 || info.status==1)"
          class='directDetail_fd6_1'>{{info.status ==0 ? '立刻上架'
          :info.status==1? '立刻下架' : ''}}</button>
        <view class='' v-else></view>
        <button v-if="isLogin && (userInfo.id==info.user_id)" class='directDetail_fd6_2' @tap.stop="handleJumpDiy"
          data-type="navigateTo"
          :data-url="`/pages/homePage/publishingwork/publishingwork?aid=${info.aid}`">重新编辑</button>

      </view>
      <view :style="{height: (120+bottomSafeAreaRpx)+'rpx'}"></view>


    </view>
  </page-body>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        isReport: false,
        "popupShow1719903243161": false,
        "popupShow1719975203414": false,
        "popupShow1719975552822": false,
        "bannerIndexfd1_0": 0,
        "aid": "",
        info: '',
        backgroundImage: '',
        bannerList: []
      };
    },
    computed: {
      userInfo() {
        return this.$store.state.userInfo
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getData()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      collect() {
        this.$api.post(global.apiUrls.post6672bac685dea, {
          collect_id: this.aid,
          type: this.info.type
        }).then(res => {
          if (res.data.code == 1) {
            if (this.info.is_collect == 0) {
              this.info.is_collect = 1
            } else {
              this.info.is_collect = 0
            }
          }
        })
      },
      preveimg(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      callPhone() {
        this.popupShow1719903243161 = false
        uni.makePhoneCall({
          phoneNumber: this.info.user_mobile
        })
      },
      // 上下架
      upXian() {
        this.$api.post(global.apiUrls.post6676ab78212d0, {
          aid: this.aid
        }).then(res => {
          this.popupShow1719975552822 = false
          if (res.data.code == 1) {
            this.getData()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      // 删除
      delPost() {
        this.$api.post(global.apiUrls.post668cd3d920916, {
          aid: this.aid
        }).then(res => {
          this.popupShow1719975203414 = false
          if (res.data.code == 1) {
            uni.navigateBack()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      changeImage(e) {
        this.bannerIndexfd1_0 = e.detail.current
        let index1 = e.detail.current
        console.log('this.bannerIndexfd1_0', index1)
        this.backgroundImage = this.info.images[index1]
        console.log('this.this.backgroundImage', this.backgroundImage)
      },
      getData() {
        this.$api.post(global.apiUrls.post66701b7e74b8f, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.info = res.data.data
            this.bannerList = this.info.images
            if (this.bannerList.length) {
              this.backgroundImage = this.info.images[0]
            }
          }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .Talentdetails_fd0_0_c2_c1_c0 {
    color: rgba(255, 255, 255, 1);
  }

  .Talentdetails_fd0_0_c2_c1 {
    background: url(image-path('168.png')) no-repeat;
    background-size: 100% 100%;
    width: 160rpx;
    height: 82rpx;
    position: fixed;
    z-index: 11;
    right: 24rpx;
    // top: 0rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .directDetail_flex_0 {
    // background: url(image-path('159.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .directDetail_fd0_0_c2_c1 {
    width: 64rpx;
    height: 64rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd0_0_c0_c0 {
    width: 64rpx;
    height: 64rpx;
  }

  .directDetail_fd0_0_c0 {
    width: 120rpx;
  }

  .directDetail_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .directDetail_numberfd1_0_c0_c0 {
    font-size: 36rpx;
  }

  .directDetail_numberfd1_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 80rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 44rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .directDetail_fd1_0_c1_c0 {
    width: 100%;
    height: 100%;
  }

  .directDetail_fd1_0 {
    width: 750rpx;
    height: 800rpx;
  }

  .directDetail_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .directDetail_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .directDetail_swiperDotfd1_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .directDetail_flex_2 {
    margin: -80rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 0rpx 100rpx 0rpx;
    position: relative;
    z-index: 9;
  }

  .directDetail_fd2_3_c2_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
    width: 450rpx;
  }

  .directDetail_fd2_3_c1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .directDetail_fd2_3_c1 {
    margin: 24rpx 0rpx 20rpx 0rpx;
  }

  .directDetail_fd2_2_c1_c0 {
    font-size: 30rpx;
    color: var(--benbenFontColor2);
  }

  .directDetail_fd2_2_c1 {
    margin: 20rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd2_1_c2 {
    font-size: 30rpx;
  }

  .directDetail_fd2_1_c1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
    width: 450rpx;
    color: var(--benbenFontColor2);
  }

  .directDetail_fd2_1_c1_c0_c0 {
    color: var(--benbenFontColor2);
    // width: 150rpx;
  }

  .directDetail_fd2_1_c1_c0 {
    margin: 20rpx 0rpx 20rpx 0rpx;
    font-size: 30rpx;
  }

  .directDetail_fd2_1_c0 {
    font-size: 36rpx;
    color: rgba(16, 16, 16, 1);
    font-weight: 600;
  }

  .directDetail_fd2_0_c2_c0 {
    font-size: 48rpx;
    font-weight: 500;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c2 {
    color: rgba(251, 99, 80, 1);
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c1_c1_c0 {
    color: var(--benbenFontColor1);
    font-size: 26rpx;
  }

  .directDetail_fd2_0_c1_c1 {
    background: #F6F6F6;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0rpx 8rpx 0rpx 8rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c1_c0_c0 {
    width: 36rpx;
    height: 36rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c1_c0 {
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd2_0_c0_c1 {
    color: var(--benbenFontColor2);
  }

  .directDetail_fd2_0_c0_c0 {
    font-size: 40rpx;
    color: rgba(16, 16, 16, 1);
    font-weight: 600;
  }

  .directDetail_fd2_0 {
    background: #FFFFFF;
    border-radius: 16rpx;
    width: 690rpx;
    padding: 24rpx;
    margin: 0rpx auto 24rpx auto;
  }

  .directDetail_flex_3 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .directDetail_fd3_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(255, 162, 31, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .directDetail_fd3_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .directDetail_fd3_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd3_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .directDetail_fd3_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .directDetail_flex_4 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .directDetail_fd4_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(255, 162, 31, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .directDetail_fd4_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .directDetail_fd4_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd4_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .directDetail_fd4_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .directDetail_flex_5 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .directDetail_fd5_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    font-size: 32rpx;
    color: rgba(255, 111, 2, 1);
    font-weight: 500;
    width: 540rpx;
  }

  .directDetail_fd5_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd5_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .directDetail_fd5_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .directDetail_flex_6 {
    background: #FFFFFF;
    width: 750rpx;
    height: 120rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto;
    left: 0rpx;
  }

  .directDetail_fd6_2 {
    background: #FF6F02;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    width: 333rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    height: 88rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .directDetail_fd6_1 {
    background: #484848;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    width: 333rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    height: 88rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .directDetail_fd6_0_c1 {
    background: #FF6F02;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    width: 580rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #fff;
    height: 88rpx;
  }

  .directDetail_fd6_0_c0_c2 {
    font-size: 22rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .directDetail_fd6_0_c0_c0 {
    width: 48rpx;
    height: 48rpx;
  }

  .directDetail_fd6_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }
</style>
